<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>


<script>
  //ES5中的var是没有块级作用域的，而ES6中的let是有块级作用域的
    //在ES5之前因为if和for都没有作用域的概念，所以在很多时候，我们必须借用function的作用来解决应用外面变量的问题
  //但是在ES6之中，加入了let,let它是有if和for的块级作用域的
//1.变量作用域：变量在什么范围内是可用的
//此处name的作用域不是当前大括号，当前变量在大括号外也是可以使用的
// {
//   var name = 'why';
//   console.log(name)
// }
//   console.log(name)


//2.没有块级作用域引起的问题    if的块级作用域
//这里所引起的问题是，当我们不希望name的值被修改的时候，或者当func需要被传递到其他地方所使用的时候，
//但是却被下方的name = 'kobe'所修改
//   var func;
//   if(true){
//       var name = 'why';
//
//       func = function () {
//           console.log(name);
//       }
//       name = 'kobe'
//       func();
//   }
//   // console.log(name)


//3.没有块级作用域引起的问题     for的块级作用域
//   var btns = document.getElementsByTagName('button')
//   for(var i = 0; i<btns.length; i++){
//       btns[i].addEventListener('click' , function () {
//           console.log('第' + i + '个按钮被点击');
//       })
// }


//使用闭包函数来解决问题
// var btns = document.getElementsByTagName('button')
// for(var i = 0; i<btns.length; i++){
//     (function (i) {
//         btns[i].addEventListener('click' , function () {
//             console.log('第' + i + '个按钮被点击');
//         })
//     })(i)
// }
//为什么使用闭包可以解决这个问题？
//因为函数是一个作用域


    //使用ES6的语法来解决问题
  const btns = document.getElementsByTagName('button')
  for(let i=0 ; i < btns.length; i++){
      btns[i].addEventListener('click',function () {
          console.log('第' + i + '个按钮被点击');
      })
  }

  



</script>


</body>
</html>